<template>
  <!-- 页面布局card通用组件 -->
  <PageCard>
    <!-- 头部工具栏 -->
    <ToolBar>
      <el-form :model="queryForm" label-width="60px">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="关键词:">
              <el-input v-model="queryForm.keyword" placeholder="账号|手机号" style="100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-button type="default" @click="loadTableData">查询</el-button>
            <el-button type="default" @click="resetQuery">重置</el-button>
            <el-button type="primary" @click="addUser" v-show="$btnPermission.verify('UserAdd')">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
    </ToolBar>

    <!-- 表格 -->
    <TablePage ref="userTablePage" :customTableHeight="255" :loading.sync="loading" :table-data="userTableDatas" :columns="columns" @reloadData="loadTableData"/>

    <!-- 新增 -->
    <AddUser ref="addUser" :title.sync="addUserTitle" :showDialog.sync="addUserVisible" :rowId.sync="rowId" @reloadData="loadTableData"/>
  </PageCard>
</template>
<script>
import PageCard from '@/components/PageCard/index.vue'
import ToolBar from '@/components/ToolBar/index.vue'
import TablePage from '@/components/TablePage/index.vue'

import AddUser from './components/addUser.vue'

import { userPage, userDelete } from '@/api/user'

export default {
name: 'SystemUserPage',
components: {
  PageCard,
  ToolBar,
  TablePage,
  AddUser
},
data(){
  return {
    loading: false,
    queryForm: null,
    initForm:{
      keyword: ''
    },
    userTableDatas: [],
    columns:[{
      title: '账号',
      name: 'username',
      width: 150,
      align: 'center'
    }, {
      title: '手机号',
      name: 'phone',
      width: 150,
      align: 'center'
    },{
      title: '姓名',
      name: 'name',
      width: 150,
      align: 'center'
    },{
      title: '身份账号',
      name: 'idCard',
      width: 250,
      align: 'center'
    }, {
      title: '账号级别',
      name: 'userLevel',
      width: 150,
      align: 'center',
      select: true,
      options: this.$config.USER_LEVEL
    },{
      title: '启用状态',
      name: 'isEnabled',
      width: 150,
      align: 'center',
      select: true,
      options: this.$config.ENABLED_STATUS
    }, {
      title: '创建时间',
      name: 'createTime',
      width: 250,
      align: 'center'
    }, {
      title: '操作',
      name: 'operate',
      width: 250,
      operate: [{
        name: '编辑',
        permission: 'EditUser',
        fun: this.editUser
      }, {
        name: '删除',
        fun: this.deleteUser,
        permission: 'DeleteUser',
        confirm: true,
        message: '确定删除选择的数据吗?',
        customStyle: {
          'margin-left': '10px'
        }
      }]
    }],
    addUserTitle: null,
    addUserVisible: false,
    rowId: null
  }
},
created(){
  this.queryForm = { ...this.initForm }
  this.$nextTick(()=> {
    this.loadTableData()
  })
},
methods: {
  //加载数据
  async loadTableData(){
    this.loading = true
    const {pageNumber, pageSize} = this.$refs.userTablePage.page
    const res = await userPage({pageNumber, pageSize, ...this.queryForm})
    this.$refs.userTablePage.page.pageNumber = res.data.pageNumber
    this.$refs.userTablePage.page.pageSize = res.data.pageSize
    this.$refs.userTablePage.page.total = res.data.total
    this.userTableDatas = res.data.rows
    this.loading = false
  },

  // 重置查询
  resetQuery(){
    this.queryForm = this.initForm
    this.loadTableData()
  },

  // 新增
  addUser(){
    this.addUserTitle = '新增'
    this.addUserVisible = true
  },

  // 编辑
  editUser(row){
    if(!row) return

    this.addUserTitle = '编辑'
    this.rowId =  row.id
    this.addUserVisible = true
  },

  // 删除
  async deleteUser(row) {
    if(!row) return

    try{
      await userDelete(row.id)
      this.loadTableData()
    }catch(e){
      console.log(e)
    }
  }
}
}
</script>
<style lang="scss" scoped>

.page-card-container{

::v-deep .el-divider--horizontal{
  margin: 0px 0 !important;
  margin-bottom: 24px !important;
}
}
</style>